<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.load=function(){
            //获取body标签
            var body=document.getElementsByTagName("name");
            /* 
                在document中有一个body属性，它保存的是body的引用
            */
           var body=document.body;
             /* 
                在document中有一个documentElement属性，它保存的是html跟标签
            */
           var html=document.documentElement;
           /* 
            all代表页面中所有的元素
           */
           var all=document.all;
        //     alert(all.length);
        //    for(var i=0;i<all.length;i++){
        //        console.log(all[i]);
        //    }

           all=document.getElementsByName("*");
           console.log(all.length);
           

           /* 
            根据元素的class属性查询一组元素节点对象
            getElementsByClassName()可以根据class属性获取一组元素节点对象，
            但是该方法不支持IE8及以下的浏览器
           */ 
          var box1=document.getElementsByClassName("box1");
          console.log(box1.length);

          /* 
            document.querySelector()
            -需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象
            虽然IE8中没有getElementsByClassName()但是可以使用querySelector（）代替
          */
         var div=document.querySelector(".box1 div")
         var box1=document.querySelector(".box1")
         //console.log(div.innerHTML);
         console.log(box1.innerHTML);

         /* 
            document.querySelectorAll()
            -该方法和querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回
            -即使符合条件的元素只有一个，它也会返回数组
         */
        box1=document.querySelectorAll(".box1");
        box1=document.querySelectorAll("#box2");
        console.log(box1);
        }
    </script>
</head>
<body>
    <div class="box1">
        我是第一个box1
        <div>我是box1中的div</div>
    </div>
    <div class="box1">
        <div>我是box1中的div</div>
    </div>
</body>
</html>